<template>
  <el-card>
    <div class="banner">
      <div class="banner-box">
        <div class="banner-left">
          <img :src="info.coverPath" />
        </div>
        <div class="banner-right">
          <div>
            <span v-if="info.courseType == 0">视频课程</span>
            <span v-if="info.courseType == 1">音频课程</span>
            <span v-if="info.courseType == 2">图文课程</span>
          </div>
          <span class="deetail-title">{{ info.seriesName }}</span>
          <div class="detail-author">
            <span> 课程编号：{{ info.courseCode }} </span>
            <div class="header-img">
              <img :src="info.expertFace" />
            </div>
            <span>{{ info.expertName }}</span>
            <span class="btn-light" v-if="info.status == '0'">未提交</span>
            <span class="btn-light" v-else-if="info.status == '1'">待审核</span>
            <span class="btn-light" v-else-if="info.status == '2'">待上架</span>
            <span class="btn-light" v-else-if="info.status == '3'">已驳回</span>
            <span class="btn-light" v-else-if="info.status == '4'">已上架</span>
            <span class="btn-light" v-else-if="info.status == '5'">已下架</span>
          </div>
          <div class="course-type f-row ai-c">
            <div>
              <span v-for="(item, index) in info.categoryList" :key="index">{{
                item
              }}</span>
            </div>
            <div class="price">
              ￥<span>{{ info.isCharge=='0'?'免费':info.price }}</span>
            </div>
          </div>
          <div class="active f-row ai-c">
            <span>{{ info.courseCount || 0 }} 节课</span>
            <span>{{ info.courseDuration || 0 }}秒</span>
            <span>{{ info.courseWatchCount || 0 }}浏览量</span>
            <span>{{ info.learnNum || 0 }}人学习</span>
            <span>{{ info.evaluateCount }}评论</span>
            <span
              >{{
                info.goodsEvRate == "NaN" ? 0 : info.goodsEvRate * 100 + "%"
              }}评分</span
            >
          </div>
        </div>
      </div>
    </div>
    <div class="course-bottom">
      <div class="course-wrap mt-5">
        <div class="f-row ai-c tabBox">
          <div
            :class="[
              'tab',
              'cp',
              'mr-2',
              currentId == i.id ? 'active_tab' : '',
            ]"
            v-for="i in tab"
            @click="choiceTab(i.id)"
            :key="i.id"
          >
            {{ i.name }}
          </div>
        </div>
        <div class="p-3 bs-bb">
          <div v-html="info.shortDesc" v-if="currentId == 1"></div>
          <div
            v-else-if="currentId == 2"
            v-for="(item, index) in courseList"
            :key="index"
            class="course-item"
            @click="handleView(item)"
          >
            <div>{{ (index + 1) | sortOrder }}</div>
            <div>
              <div>{{ item.courseName }}</div>
              <div class="f-row ai-c">
                <img
                  :src="
                    item.type == 'logo-youtube'
                      ? 'videoSrc'
                      : item.type == 'ios-musical-notes'
                      ? audioSrc
                      : imgSrc
                  "
                  alt=""
                />
                <div>
                  {{ item.fileName }}
                </div>
              </div>
            </div>
            <div>查看</div>
          </div>
          <comment-list
            @nextPage="nextPage"
            @nomore="nomore"
            v-else-if="currentId == 3"
            :commentData="commentData"
            :rateData="rateData"
            :total="total"
            @answerSuccess='answerSuccess'
          ></comment-list>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import {
  getCourseInfoById,
  getCourseById,
  comment_list,
  comment_rate,
} from "@/request/api";
import commentList from "@/components/course/commentList.vue";
export default {
  components: {
    commentList,
  },
  data() {
    return {
      id: null,
      imgSrc: require("@/assets/images/others/course-img.png"),
      audioSrc: require("@/assets/images/others/course-audio.png"),
      videoSrc: require("@/assets/images/others/course-video.png"),
      currentId: 1,
      tab: [
        {
          id: 1,
          name: "课程介绍",
        },
        {
          id: 2,
          name: "课程目录",
        },
        {
          id: 3,
          name: "课程评论",
        },
      ],
      info: {
        // 课程信息
        coverPath: null,
        courseType: null,
        categoryList: [],
        categoryStr: null,
        sourceName: null,
        courseCode: null,
        expertFace: null,
        expertName: null,
        courseCount: null,
        courseDuration: null,
        shortDesc: null,
      },
      courseList: [], // 课程目录
      commentData: [], //评论数据
      page: 1, //评论分页
      rateData: null, //评分数据
      total: 0,
      next_text: "查看更多",
    };
  },
  filters: {
    sortOrder(val) {
      return val >= 10 ? val : "0" + val;
    },
    formatTime(val) {
      let s = parseInt(val);
      var m = 0;
      var h = 0;
      if (s > 60) {
        m = parseInt(s / 60);
        s = parseInt(s % 60);
        if (m > 60) {
          h = parseInt(m / 60);
          m = parseInt(m % 60);
        }
      }
      var res = parseInt(s) + "秒";
      if (m > 0) {
        res = parseInt(m) + "分" + res;
      }
      if (h > 0) {
        res = parseInt(h) + "小时" + res;
      }
      return res;
    },
  },
  mounted() {
    this.id = this.$route.params.id;
    this.init();
  },
  methods: {
    nextPage() {
      this.page = this.page + 1;
      this.getcommentList();
    },
    nomore() {
      this.next_text = "没有更多数据了~";
    },
    //获取评分数据
    commentRateFn() {
      comment_rate(this.id).then((res) => {
        this.rateData = res.result;
      });
    },
    //获取评论列表
    getcommentList() {
      this.next_text = "正在加载--";
      comment_list({
        courseSeriesId: this.id,
        page: this.page,
        rows: 10,
      }).then((res) => {
        this.next_text = "加载完成";
        this.commentData = this.commentData.concat(res.result.records);
        this.total = Number(res.result.total);
      });
    },
    //刷新评论
    answerSuccess(){
      this.page=1
        this.commentData =[]
      this.getcommentList() 
    },
    //点击tab
    choiceTab(id) {
      this.currentId = id;
    },
    // 初始化表单
    init() {
      if (this.id) {
        this.getDetailInfo();
        this.getDetailList();
        this.getcommentList();
        this.commentRateFn();
      } else {
        this.$message.error("缺少课程ID");
      }
    },
    // 获取课程列表
    getDetailList() {
      getCourseById(this.id).then((res) => {
        if (res.success) {
          res.result.forEach((i) => {
            if (i.sourcePath.lastIndexOf(".mp4") != -1) {
              i.type = "logo-youtube";
            } else if (i.sourcePath.lastIndexOf(".mp3") != -1) {
              i.type = "ios-musical-notes";
            } else {
              i.type = "md-image";
            }
          });
          this.courseList = res.result;
        }
      });
    },
    // 获取课程信息
    getDetailInfo() {
      getCourseInfoById(this.id).then((res) => {
        if (res.success) {
          res.result.categoryList = res.result.categoryStr.split(" ");
          this.info = res.result;
        }
      });
    },
    // 查看
    handleView(row) {
      this.$router.push({
        name: "cousreDetail",
        query: { id: this.id, current: row.id },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.tabBox {
  border-bottom: 0.125rem solid #f3f3f3;
  width: 100%;
}
.tab {
  padding-bottom: 1.25rem;
  padding: 1.25rem;
  border-bottom: 0.125rem solid #f3f3f3;
}
.active_tab {
  color: var(--themeCOlor) !important;
  border-bottom: 0.125rem solid var(--themeCOlor) !important;
  > div {
  }
}
.el-card {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.deetail-main {
  min-height: calc(100vh - 80px);
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}
.banner {
  width: 100%;
  background: linear-gradient(to right, #feedea, #fcf8f8);
  display: flex;
  position: relative;
  padding: 2.5rem;
  box-sizing: border-box;
  .banner-box {
    display: grid;
    grid-template-columns: 25.9375rem 1fr;
    /*      width: calc(1400 / 1920 * 100vw); */
    width: 100%;
    box-sizing: border-box;
    height: 16.1875rem;
    /*   margin: 1.6875rem auto 0px; */
    position: relative;
    justify-content: center;
    .banner-left {
      width: 25.9375rem;
      height: inherit;
      background-color: #ffe8e7;
      border-radius: 0.623rem;
      overflow: hidden;
      img {
        width: 100%;
        height: auto;
      }
    }
    .banner-right {
      margin-left: 2.75rem;
      > div:first-child {
        display: inline-block;
        color: #ff5c58;
        background-color: #fadedf;
        padding: 0.5rem 0.75rem;
        border-radius: 0.25rem;
        vertical-align: super;
        margin-right: 1.25rem;
      }
      .deetail-title {
        display: inline-block;
        font-size: 1.625rem;
        line-height: 1.5rem;
        margin-top: 1.25rem;
      }
      .detail-author {
        margin-top: 1.25rem;
        display: flex;
        align-items: center;
        > span {
          display: inline-block;
          font-size: 0.875rem;
          margin-left: 0.75rem;
        }
        .header-img {
          width: 2.3125rem;
          height: 2.9375rem;
          border-radius: 50%;
          margin-left: 1.875rem;
          overflow: hidden;
          background: #ffe8e7;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .course-type {
        margin-top: 1.25rem;
        font-size: 0.875rem;
        color: #9d9d9d;
        span {
          display: inline-block;
          height: 1.875rem;
          background: #ffffff;
          border-radius: 0.25rem;
          text-align: center;
          line-height: 1.875rem;
          margin-right: 0.8125rem;
        }
      }
      .active {
        span {
          margin-top: 2.5rem;
          margin-right: 1.25rem;
        }
        font-size: 1rem;
      }
    }
    .price {
      /*    position: absolute;
      top: 40%;
      right: 15%; */
      font-size: 1.625rem;
      font-weight: 600;
      color: #ff7a38;
      span {
        font-size: 2.25rem;
      }
    }
  }
}
.course-bottom {
  width: 100%;

  background: #ffffff;
  .course-wrap {
    width: 100%;
    box-sizing: border-box;
    padding: 0.625rem 1.25rem;
    ::v-deep(.ivu-tabs-tab) {
      font-weight: 500;
    }
    ::v-deep(.ivu-tabs-tab:hover) {
      color: #fa7e7e;
    }
    .directory {
      margin-top: 1.125rem;
    }
    .course-item {
      margin: auto;
      padding: 0.625rem;
      box-sizing: border-box;
      border-bottom: 1px solid #f2f2f2;
      display: flex;
      &:hover {
        cursor: pointer;
        background-color: #f7fafc;
      }
      > div:first-child {
        width: 60px;
        font-size: 1.25rem;
        padding: 0.3125rem;
        text-align: center;
      }
      > div:nth-child(2) {
        flex: 1;
        > div:first-child {
          font-size: 1.125rem;
          padding: 0.3125rem;
        }
        > div:last-child {
          display: flex;
          padding: 0.3125rem;
          font-size: 0.875rem;
          color: #c1c8d0;
          justify-content: space-between;
          > div:first-child {
            flex: 6;
          }
          > div:last-child {
            flex: 4;
          }
        }
      }
      > div:last-child {
        width: 5rem;
        margin: auto 0;
        text-align: center;
        color: #5dd6c9;
      }
    }
  }
}
</style>
